<template>
  <el-row :gutter="15" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel">
        <!-- <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">会员总数</div>
          <count-to
            :start-val="1110"
            :end-val="count.userCount"
            :duration="2600"
            class="card-panel-num"
          />
        </div> -->
        <div class="card-panel-title">
          <div class="card-panel-title-left">会员总数</div>
          <div class="card-panel-title-right">全平台</div>
        </div>
        <div class="card-panel-content">
          <div class="card-panel-content-left">
            <count-to
              :start-val="0"
              :end-val="count.userCount.Total"
              :duration="3600"
              class="card-panel-num"
            />
          </div>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-description-left">
            <span class="card-panel-description-text">昨日新增</span>
            <span class="card-panel-description-text"
              >{{ count.userCount.Added }}个</span
            >
          </div>
          <div class="card-panel-description-right">
            <span class="card-panel-description-text"> 在线会员</span>
            <span class="card-panel-description-text"
              >{{ count.userCount.online }}个</span
            >
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="order" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">订单总数</div>
          <count-to
            :start-val="0"
            :end-val="count.orderCount"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-title">
          <div
            class="card-panel-title-left"
            :style="{ fontSize: '12px', fontWeight: 'bold' }"
          >
            总积分(个)
          </div>
          <div class="card-panel-title-right">全平台</div>
        </div>
        <div class="card-panel-content">
          <div class="card-panel-content-left">
            <count-to
              :start-val="0"
              :end-val="count.Integral.allIntegral"
              :duration="3600"
              class="card-panel-num"
            />
          </div>
          <!-- <div class="card-panel-content-right">
            <el-row>
              <el-col span="12">运维：</el-col>
              <el-col span="12">323232个</el-col>
            </el-row>
            <el-row>
              <el-col span="12">奖金池：</el-col>
              <el-col span="12">323232个</el-col>
            </el-row>
            <el-row>
              <el-col span="12">系统分销：</el-col>
              <el-col span="12">323232个</el-col>
            </el-row>
            <el-row>
              <el-col span="12">区域代理：</el-col>
              <el-col span="12">323232个</el-col>
            </el-row>
          </div> -->
        </div>
        <div class="card-panel-description">
          <div class="card-panel-description-left">
            <span
              class="card-panel-description-text"
              :style="{ fontSize: '12px', fontWeight: 'bold' }"
              >本月累计积分</span
            >
          </div>
          <div class="card-panel-description-right">
            <span class="card-panel-description-text">
              <count-to
                :start-val="0"
                :end-val="count.Integral.currentMonthIntegral"
                :duration="3600"
                class="card-panel-num"
              />个</span
            >
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">商品总数</div>
          <count-to
            :start-val="0"
            :end-val="count.goodsCount"
            :duration="3600"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-title">
          <div
            class="card-panel-title-left"
            :style="{ fontSize: '12px', fontWeight: 'bold' }"
          >
            累计营业额(元)
          </div>
          <div class="card-panel-title-right">全平台</div>
        </div>
        <div class="card-panel-content">
          <div class="card-panel-content-left">
            <count-to
              :start-val="0"
              :end-val="count.turnover"
              :duration="3600"
              class="card-panel-num"
            />
          </div>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-description-left">
            <span
              class="card-panel-description-text"
              :style="{ fontSize: '12px', fontWeight: 'bold' }"
              >本月营业额</span
            >
          </div>
          <div class="card-panel-description-right">
            <span class="card-panel-description-text">
              <count-to
                :start-val="0"
                :end-val="2654416"
                :duration="3600"
                class="card-panel-num"
              />元</span
            >
          </div>
        </div>
      </div>
    </el-col>
    <!-- <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div
        class="card-panel card-panel-last"
        :style="{ border: '1px solid #797979' }"
      >
        <div class="card-panel-last-header">累计营业额(元)</div>
        <div class="card-panel-last-context">7892255</div>
        <div class="card-panel-last-footer">
          <div>本月营业额</div>
          <div>2654416元</div>
        </div>
      </div>
    </el-col> -->
  </el-row>
</template>
<script>
import CountTo from "vue-count-to";
import { gett } from "@/api/visits";
import {
  getTotal,
  getYesterDayTotal,
  getOnlineMemberTotal,
} from "@/api/member";
import { getIntegral } from "@/api/integral";
export default {
  components: {
    CountTo,
  },
  data() {
    return {
      count: {
        todayPrice: 0,
        todayCount: 0,
        proPrice: 0,
        proCount: 0,
        monthPrice: 0,
        monthCount: 0,
        lastWeekCount: 0,
        lastWeekPrice: 0,
        userCount: {
          Total: 0,
          Added: 0,
          online: 0,
        },
        orderCount: 0,
        priceCount: 0,
        goodsCount: 0,
        Integral: {
          allIntegral: 0,
          currentMonthIntegral: 0,
        },
        turnover: 7892255,
      },
    };
  },
  mounted() {
    // gett().then((res) => {
    //   this.count.todayPrice = res.todayPrice;
    //   this.count.todayCount = res.todayCount;
    //   this.count.proCount = res.proCount;
    //   this.count.proPrice = res.proPrice;

    //   this.count.monthPrice = res.monthPrice;
    //   this.count.monthCount = res.monthCount;
    //   this.count.lastWeekCount = res.lastWeekCount;
    //   this.count.lastWeekPrice = res.lastWeekPrice;

    //   this.count.userCount = res.userCount;
    //   this.count.orderCount = res.orderCount;
    //   this.count.priceCount = res.priceCount;
    //   this.count.goodsCount = res.goodsCount;
    // });
    getTotal().then((res) => {
      if (res.status === "1") {
        this.count.userCount.Total = res.data.total;
        numFormat(this.count.userCount.Total);
      }
      console.log(res);
    });
    getYesterDayTotal().then((res) => {
      if (res.status === "1") {
        this.count.userCount.Added = res.data.total;
      }
    });
    getOnlineMemberTotal().then((res) => {
      if (res.status === "1") {
        this.count.userCount.online = res.data.total;
      }
    });

    getIntegral()
      .then((res) => {
        console.log("1111111111111", res);
        if (res.status === "1") {
          this.count.Integral.allIntegral = res.data.allIntegral;
          this.count.Integral.currentMonthIntegral =
            res.data.currentMonthIntegral;
        }
      })
      .catch((err) => {
        console.log("222222222222222222", err);
      });
  },
  methods: {
    numFormat(cellValue) {
      cellValue += "";
      if (!cellValue.includes(".")) cellValue += ".";
      return cellValue
        .replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
          return $1 + ",";
        })
        .replace(/\.$/, "");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 168px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    /* .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    } */
    .card-panel-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 10px;
      border-bottom: 2px solid #ecf0f8;
      .card-panel-title-left {
        color: #5d5d5d;
        font-size: 12px;
        font-weight: 500;
      }
      .card-panel-title-right {
        background-color: rgba(105, 194, 146, 0.3);
        border-radius: 2px;
        padding: 3px 2px;
        color: #46c27d;
      }
    }
    .card-panel-content {
      margin: 0 10px;
      position: relative;
      border-bottom: 2px solid #ecf0f8;
      overflow: hidden;
      .card-panel-content-left {
        padding: 18px 0;
        font-size: 22px;
        float: left;
      }
      .card-panel-content-right {
        font-size: 8px;
        min-width: 120px;
        float: right;
      }
    }
    .card-panel-description {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 10px;
    }
  }
  .card-panel-last {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 10px 10px;
    .card-panel-last-header {
      font-size: 12px;
      font-weight: bold;
    }
    .card-panel-last-context {
      align-self: center;
      font-weight: bold;
    }
    .card-panel-last-footer {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
@media (max-width: 1300px) {
  .card-panel-content-right {
    display: none;
  }
}
</style>
